﻿@using System.Web.Script.Serialization
@model BusinessLogic.DTO.Test.QuestionDTO

@{
    ViewBag.Title = "addQuestion";
    Layout = "~/Views/Shared/_adminLayout.cshtml";
}
<script type="text/javascript"> 
    var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));
    
    function chooseAnwser(data) {
        this.ChoiceQuestionAnwserID = ko.observable(data.ChoiceQuestionAnwserID);
        this.Text = ko.observable(data.Text);
        this.ChoiceAnwserTypeID = ko.observable(data.ChoiceAnwserTypeID);
        this.QuestionID = ko.observable(data.QuestionID);
        this.IsCorrect = ko.observable(data.IsCorrect);
        this.Data = ko.observable(data.Data);
    }

    var ViewModel = function() {
        var self = this;
        self.chooseAnwsers = ko.observableArray([]);
        self.question = ko.observable();
        self.openAnwser = ko.observable();
        self.categories = ko.observable();
        self.dificulties = ko.observable();
        self.questionTypes = ko.observable();

        self.addchooseAnwser = function() {
            self.chooseAnwsers.push({
                ChoiceQuestionAnwserID: "",
                Text: "",
                ChoiceAnwserTypeID: "",
                QuestionID: "",
                IsCorrect: "",
                Data: "",
            });
        };
        
        self.removechooseAnwser = function(anwser) {
            self.chooseAnwsers.remove(anwser);
        };

        self.loadData = function() {
            var mappedchooseAnwsers = $.map(initialData.ChoiceQuestionAnwsers, function(item) { return new chooseAnwser(item) });
            self.chooseAnwsers(mappedchooseAnwsers);
            self.question = ko.mapping.fromJS(initialData.Question);
            self.openAnwser = ko.mapping.fromJS(initialData.OpenQuestionAnwser);
            self.categories = ko.mapping.fromJS(initialData.Categories);
            self.dificulties = ko.mapping.fromJS(initialData.Difficulties);
            self.questionTypes = ko.mapping.fromJS(initialData.QuestionTypes);
        };
        
        self.save = function() {
            $.ajax("/Question/Save", {
                data: ko.toJSON({ 
                    ChoiceQuestionAnwsers: self.chooseAnwsers,
                    Question: self.question,
                    OpenQuestionAnwser: self.openAnwser
                }),
                type: "post", contentType: "application/json",
                success: function(result) { window.location.href = result; },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
        }; 

    };

    var viewModel = new ViewModel();
    viewModel.loadData();

    function showDiv() {
            var target = $("#QuestionType").val();

            if (target == 2) {
                $("#chooseAnwsers").css('display', 'block');
            } else {
                $("#chooseAnwsers").css('display', 'none');
            }
        }
    $(document).ready(function () {
        $("#QuestionType").change(function () {
            showDiv();
        });
        ko.applyBindings(viewModel);
        $("#myform").validate({ submitHandler: function () { viewModel.save(); } });
     });

</script>

<h2>Dodaj pytanie</h2>
<form id="myform">
    <p>@Html.Label("Rodzaj pytania:")
        <select id="QuestionType" data-bind="options: questionTypes, optionsText: 'Type',optionsValue: 'QuestionTypeID', value: question.QuestionTypeID"></select>
    </p>
    <p>
        @Html.Label("Kategoria:")
        <select data-bind="options: categories, optionsText: 'Name',optionsValue: 'CategoryID', value: question.CategoryID"></select>
    </p>
    <p>
        @Html.Label("Poziom trudności:")
        <select data-bind="options: dificulties, optionsText: 'DifficultyName',optionsValue: 'DifficultyID', value: question.DifficultyID"></select>
    </p>
    @Html.Label("Treść pytania:")
        <textarea style="width: 500px; height: 197px;" data-bind="value: viewModel.question.QuestionText"></textarea>

    <div id="chooseAnwsers" style="display: none">
        <table class="hovered" id="anwsers">
            <tr>
                <th>
                    Poprawna
                </th>
                <th>
                    Treść odpowiedzi
                </th>
                <th>
                    
                </th>
            </tr>
            <tbody data-bind='foreach: chooseAnwsers'>
                <tr>
                    <td><input type="checkbox" data-bind='checked: IsCorrect' /></td>
                    <td><input class='required' data-bind='value: Text, uniqueName: true' /></td>
                    <td><a href='#' data-bind='click: $root.removechooseAnwser'>Usuń</a></td> 
                </tr>
            </tbody>
        </table>
        <div>
            <button data-bind='click: addchooseAnwser'>Dodaj odpowiedź</button>
        </div>
    </div>
    <p>
        <button data-bind="click: save">Zapisz</button>
    </p>
</form>
<style scoped="scoped">
  input.error { border: 1px solid red; background-color: #FDC; }
  label.error { display: block; color: Red; font-size: 0.8em; }
</style>